<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PaddleOCR 视频识别 - Web 版</title>
    <link rel="stylesheet" href="/web/css/style.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1>🎥 PaddleOCR 视频识别</h1>
            <p class="subtitle">支持视频文件上传和实时摄像头识别</p>
        </header>

        <!-- 主要内容 -->
        <main class="main-content">
            <!-- 标签页 -->
            <div class="tabs">
                <button class="tab-btn active" data-tab="upload">📁 上传视频</button>
                <button class="tab-btn" data-tab="camera">📷 摄像头</button>
                <button class="tab-btn" data-tab="settings">⚙️ 设置</button>
            </div>

            <!-- 上传视频标签页 -->
            <div id="upload" class="tab-content active">
                <div class="upload-section">
                    <div class="upload-area" id="uploadArea">
                        <div class="upload-icon">📹</div>
                        <p>拖拽视频文件到此处或点击选择</p>
                        <p class="upload-hint">支持 MP4, WebM, Ogg 等格式</p>
                    </div>
                    <input type="file" id="videoInput" accept="video/*" style="display: none;">
                </div>

                <div class="video-preview">
                    <video id="uploadedVideo" controls></video>
                </div>

                <div class="control-buttons">
                    <button id="processBtn" class="btn btn-primary" disabled>
                        <span class="btn-icon">▶️</span> 开始识别
                    </button>
                    <button id="clearBtn" class="btn btn-secondary">
                        <span class="btn-icon">🗑️</span> 清空
                    </button>
                </div>
            </div>

            <!-- 摄像头标签页 -->
            <div id="camera" class="tab-content">
                <div class="camera-section">
                    <!-- 摄像头提示 -->
                    <div class="info-box">
                        <p>💡 <strong>提示:</strong> 摄像头功能需要浏览器权限。首次使用时，浏览器会请求摄像头访问权限。</p>
                        <p>🔒 <strong>安全:</strong> 如果在远程服务器上使用，请确保使用 HTTPS 连接。</p>
                    </div>

                    <div class="camera-container">
                        <video id="cameraVideo" autoplay playsinline></video>
                        <canvas id="cameraCanvas" style="display: none;"></canvas>
                    </div>

                    <div class="camera-controls">
                        <button id="startCameraBtn" class="btn btn-primary">
                            <span class="btn-icon">▶️</span> 启动摄像头
                        </button>
                        <button id="stopCameraBtn" class="btn btn-secondary" disabled>
                            <span class="btn-icon">⏹️</span> 停止摄像头
                        </button>
                        <button id="captureBtn" class="btn btn-success" disabled>
                            <span class="btn-icon">📸</span> 拍照识别
                        </button>
                    </div>

                    <div class="camera-settings">
                        <label>
                            <input type="checkbox" id="continuousMode"> 连续识别模式
                        </label>
                        <label>
                            识别间隔 (秒):
                            <input type="number" id="captureInterval" min="1" max="10" value="2">
                        </label>
                    </div>
                </div>
            </div>

            <!-- 设置标签页 -->
            <div id="settings" class="tab-content">
                <div class="settings-section">
                    <h3>API 设置</h3>
                    <div class="setting-item">
                        <label for="apiUrl">API 地址:</label>
                        <input type="text" id="apiUrl" placeholder="留空表示使用当前服务器，或输入完整地址如 http://192.168.10.11:8000">
                        <span class="hint">留空时使用相对路径连接到同一服务器；输入完整地址可连接到其他服务器</span>
                    </div>

                    <h3>识别参数</h3>
                    <div class="setting-item">
                        <label for="sampleRate">采样率 (帧):</label>
                        <input type="number" id="sampleRate" min="1" max="30" value="5">
                        <span class="hint">每隔多少帧进行一次识别</span>
                    </div>

                    <div class="setting-item">
                        <label for="minScore">最小置信度:</label>
                        <input type="number" id="minScore" min="0" max="1" step="0.1" value="0.5">
                        <span class="hint">0-1 之间，越高越严格</span>
                    </div>

                    <div class="setting-item">
                        <label for="maxResults">最大结果数:</label>
                        <input type="number" id="maxResults" min="1" max="100" value="20">
                        <span class="hint">返回的最大识别结果数</span>
                    </div>

                    <button id="saveSettingsBtn" class="btn btn-primary">
                        <span class="btn-icon">💾</span> 保存设置
                    </button>
                </div>
            </div>
        </main>

        <!-- 结果显示区域 -->
        <section class="results-section">
            <h2>识别结果</h2>
            
            <!-- 进度条 -->
            <div id="progressContainer" class="progress-container" style="display: none;">
                <div class="progress-bar">
                    <div id="progressFill" class="progress-fill"></div>
                </div>
                <p id="progressText" class="progress-text">处理中... 0%</p>
            </div>

            <!-- 状态信息 -->
            <div id="statusMessage" class="status-message"></div>

            <!-- 结果列表 -->
            <div class="results-container">
                <div id="resultsList" class="results-list">
                    <p class="empty-state">暂无识别结果</p>
                </div>

                <!-- 结果统计 -->
                <div id="resultStats" class="result-stats" style="display: none;">
                    <h3>统计信息</h3>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <span class="stat-label">总文本数:</span>
                            <span id="totalTexts" class="stat-value">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">处理时间:</span>
                            <span id="processingTime" class="stat-value">0s</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">平均置信度:</span>
                            <span id="avgConfidence" class="stat-value">0%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 导出按钮 -->
            <div class="export-buttons" id="exportButtons" style="display: none;">
                <button id="exportJsonBtn" class="btn btn-secondary">
                    <span class="btn-icon">📄</span> 导出 JSON
                </button>
                <button id="exportTxtBtn" class="btn btn-secondary">
                    <span class="btn-icon">📝</span> 导出 TXT
                </button>
                <button id="copyResultsBtn" class="btn btn-secondary">
                    <span class="btn-icon">📋</span> 复制结果
                </button>
            </div>
        </section>
    </div>

    <!-- 加载脚本 -->
    <script src="/web/lib/axios.min.js"></script>
    <script src="/web/js/api.js"></script>
    <script src="/web/js/ui.js"></script>
    <script src="/web/js/app.js"></script>

    <!-- 全局初始化 -->
    <script>
        // 创建全局 API 实例（使用相对路径，默认连接到同一服务器）
        const ocrApi = new OCRApi();

        // 创建全局 UI 管理器实例
        const uiManager = new UIManager();
    </script>
</body>
</html>

